<template>
    <div class="navigationOfCalendar">
      <!-- <tab :key="key">
        <tab-item class="navigationItem" :selected="flagOfCalendar==='S_mainview'?true:false" @on-item-click="mainView">
          <i class="fa fa-calendar"  :style="{color:(flagOfCalendar==='S_mainview'?'green':'black')}"></i><br>主视图</tab-item>
        <tab-item class="navigationItem" :selected="flagOfCalendar==='S_monthview'?true:false" @on-item-click="monthView">
          <i class="fa fa-calendar-check-o" :style="{color:(flagOfCalendar==='S_monthview'?'green':'black')}" ></i><br>月视图</tab-item>
        <tab-item class="navigationItem" :selected="flagOfCalendar==='S_scheduleview'?true:false" @on-item-click="allView">
          <i class="fa fa-list" :style="{color:(flagOfCalendar==='S_scheduleview'?'green':'black')}"></i><br>日&nbsp;&nbsp;程</tab-item>
      </tab> -->
        <tab>
          <tab-item class="navigationItem" :selected="flagOfCalendar==='S_mainview'?true:false" @on-item-click="mainView">
            <i class="fa fa-calendar"  :style="{color:(flagOfCalendar==='S_mainview'?'green':'black')}"></i><br>主视图</tab-item>
          <tab-item class="navigationItem" :selected="flagOfCalendar==='S_scheduleview'?true:false" @on-item-click="allView">
            <i class="fa fa-list" :style="{color:(flagOfCalendar==='S_scheduleview'?'green':'black')}"></i><br>日&nbsp;&nbsp;程</tab-item>
<!--          <tab-item class="navigationItem" :selected="flagOfCalendar==='S_showAllTodos'?true:false" @on-item-click="todoView">-->
<!--            <i class="fa fa-calendar-check-o" :style="{color:(flagOfCalendar==='S_showAllTodos'?'green':'black')}" ></i><br>待办事项</tab-item>-->
        </tab>
  </div>
</template>

<script>
import {Tab, TabItem } from 'vux'

export default {
  props: {
    flagOfCalendar: {type: String}
  },
  data () {
    return {
      key:0,//用于重新渲染组件
    }
  },
  components: {
    Tab,
    TabItem
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    mainView () {
      this.$router.push({name: 'S_mainview'})
    },
    allView () {
      this.$router.push({name: 'S_scheduleview'})
    },
    // monthView () {
    //   this.$router.push({name: 'S_scheduleview'})
    // },
    // todoView () {
    //   this.$router.push({name: 'S_showAllTodos'})
    // },

  },

}
</script>
<style scoped>
.navigationOfCalendar{
    /* position:fixed;
    top: 0px; */
    width: 100%;
    z-index: 200;
}
.navigationOfCalendar .navigationItem{
  /* height: 100px; */
  line-height: 20px;
  background-color: #f9f9f9;
}


</style>
